<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物业费计算器（含能耗费）</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 700px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .calculator {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="number"], input[type="date"], input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            margin-top: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #e9f7ef;
            border-radius: 4px;
            display: none;
        }
        .price-info {
            font-size: 0.9em;
            color: #666;
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 4px;
        }
        .breakdown {
            margin-top: 15px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }
        .discount-info {
            color: #d35400;
            font-weight: bold;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .total-row {
            font-weight: bold;
            background-color: #e6e6e6;
        }
    </style>
</head>
<body>
    <h1>物业费计算器（含能耗费）</h1>
    <div class="calculator">
        <div class="price-info">
            <p><strong>物业费单价构成：</strong></p>
            <ul>
                <li><strong>2024年5月1日以前：</strong>2.8元 = 1.95元(物业费) + 0.85元(能耗费)</li>
                <li><strong>2024年5月1日及以后：</strong>2.2元 = 1.7元(物业费) + 0.5元(能耗费)</li>
                <li class="discount-info">注：折扣仅适用于物业费部分，能耗费不参与折扣</li>
            </ul>
        </div>
        
        <div class="form-group">
            <label for="area">房屋面积 (平方米):</label>
            <input type="number" id="area" min="1" step="0.01" required>
        </div>
        
        <div class="form-group">
            <label for="start-date">开始日期:</label>
            <input type="date" id="start-date" required>
        </div>
        
        <div class="form-group">
            <label for="end-date">结束日期:</label>
            <input type="date" id="end-date" required>
        </div>
        
        <div class="form-group">
            <label for="discount">折扣比例 (%): (如不打折请填0)</label>
            <input type="number" id="discount" min="0" max="100" value="0">
        </div>
        
        <button onclick="calculateFee()">计算物业费</button>
        
        <div id="result" class="result"></div>
    </div>

    <script>
        function calculateFee() {
            // 获取输入值
            const area = parseFloat(document.getElementById('area').value);
            const startDateStr = document.getElementById('start-date').value;
            const endDateStr = document.getElementById('end-date').value;
            const discount = parseFloat(document.getElementById('discount').value) || 0;
            
            // 验证输入
            if (!area || !startDateStr || !endDateStr) {
                alert('请填写所有必填字段');
                return;
            }
            
            if (area <= 0) {
                alert('房屋面积必须大于0');
                return;
            }
            
            if (discount < 0 || discount > 100) {
                alert('折扣比例必须在0-100之间');
                return;
            }
            
            const startDate = new Date(startDateStr);
            const endDate = new Date(endDateStr);
            
            if (startDate > endDate) {
                alert('开始日期不能晚于结束日期');
                return;
            }
            
            // 设置价格调整日期
            const priceChangeDate = new Date('2024-05-01');
            
            // 计算总月数
            const months = (endDate.getFullYear() - startDate.getFullYear()) * 12 + 
                          (endDate.getMonth() - startDate.getMonth()) + 1;
            
            // 计算各时间段的月数
            let monthsBefore = 0;
            let monthsAfter = 0;
            
            if (endDate < priceChangeDate) {
                // 全部在调价前
                monthsBefore = months;
            } else if (startDate >= priceChangeDate) {
                // 全部在调价后
                monthsAfter = months;
            } else {
                // 跨越调价日期
                const lastDayOfPrevMonth = new Date(priceChangeDate);
                lastDayOfPrevMonth.setDate(0); // 设置为上个月的最后一天
                
                monthsBefore = (lastDayOfPrevMonth.getFullYear() - startDate.getFullYear()) * 12 + 
                              (lastDayOfPrevMonth.getMonth() - startDate.getMonth()) + 1;
                
                monthsAfter = months - monthsBefore;
            }
            
            // 价格构成
            const propertyFeeBefore = 1.95;
            const energyFeeBefore = 0.85;
            const propertyFeeAfter = 1.7;
            const energyFeeAfter = 0.5;
            
            // 计算折扣系数
            const discountFactor = (100 - discount) / 100;
            
            // 计算各项费用
            // 调价前
            const propertyBefore = monthsBefore * area * propertyFeeBefore * discountFactor;
            const energyBefore = monthsBefore * area * energyFeeBefore;
            const totalBefore = propertyBefore + energyBefore;
            
            // 调价后
            const propertyAfter = monthsAfter * area * propertyFeeAfter * discountFactor;
            const energyAfter = monthsAfter * area * energyFeeAfter;
            const totalAfter = propertyAfter + energyAfter;
            
            // 总计
            const totalProperty = propertyBefore + propertyAfter;
            const totalEnergy = energyBefore + energyAfter;
            const totalFee = totalProperty + totalEnergy;
            
            // 显示结果
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = `
                <h3>计算结果</h3>
                <p>房屋面积: ${area} 平方米</p>
                <p>计算周期: ${startDateStr} 至 ${endDateStr} (共 ${months} 个月)</p>
                ${discount > 0 ? `<p class="discount-info">应用折扣: ${discount}% (仅物业费部分)</p>` : ''}
                
                <div class="breakdown">
                    <h4>费用明细</h4>
                    <table>
                        <thead>
                            <tr>
                                <th>时间段</th>
                                <th>月份数</th>
                                <th>物业费</th>
                                <th>能耗费</th>
                                <th>小计</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${monthsBefore > 0 ? `
                            <tr>
                                <td>2024年5月前</td>
                                <td>${monthsBefore}</td>
                                <td>${propertyBefore.toFixed(2)}元<br>
                                    <small>(${monthsBefore}×${area}×${propertyFeeBefore}${discount > 0 ? `×${discountFactor.toFixed(2)}` : ''})</small>
                                </td>
                                <td>${energyBefore.toFixed(2)}元<br>
                                    <small>(${monthsBefore}×${area}×${energyFeeBefore})</small>
                                </td>
                                <td>${totalBefore.toFixed(2)}元</td>
                            </tr>
                            ` : ''}
                            
                            ${monthsAfter > 0 ? `
                            <tr>
                                <td>2024年5月及以后</td>
                                <td>${monthsAfter}</td>
                                <td>${propertyAfter.toFixed(2)}元<br>
                                    <small>(${monthsAfter}×${area}×${propertyFeeAfter}${discount > 0 ? `×${discountFactor.toFixed(2)}` : ''})</small>
                                </td>
                                <td>${energyAfter.toFixed(2)}元<br>
                                    <small>(${monthsAfter}×${area}×${energyFeeAfter})</small>
                                </td>
                                <td>${totalAfter.toFixed(2)}元</td>
                            </tr>
                            ` : ''}
                            
                            <tr class="total-row">
                                <td colspan="2">总计</td>
                                <td>${totalProperty.toFixed(2)}元</td>
                                <td>${totalEnergy.toFixed(2)}元</td>
                                <td>${totalFee.toFixed(2)}元</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <h4>最终应缴费用: ${totalFee.toFixed(2)}元</h4>
                <p>其中:</p>
                <ul>
                    <li>物业费: ${totalProperty.toFixed(2)}元${discount > 0 ? ` (已应用${discount}%折扣)` : ''}</li>
                    <li>能耗费: ${totalEnergy.toFixed(2)}元</li>
                </ul>
            `;
            resultDiv.style.display = 'block';
        }
        
        // 设置默认日期为当前月首尾
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date();
            const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
            const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
            
            // 格式化日期为YYYY-MM-DD
            function formatDate(date) {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            }
            
            document.getElementById('start-date').value = formatDate(firstDay);
            document.getElementById('end-date').value = formatDate(lastDay);
        });
    </script>
</body>
</html>